<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* {
	margin: 0;
	padding: 0;
}
ul, li {
	list-style: none;
}
.navList li {
	width: 40px;
	padding:10px 0;
	font-size:14px;
	line-height: 20px;
	text-align:center;
	color:#fff;
	background-color:#999;
	cursor:pointer;
	border-bottom:1px solid #fff;
}
.navList li.cur{
	background-color:#C30;
	
	}
.navLeft {
	position:fixed;
	top:50%;
	margin-top:-160px;
	left:10px;
	width: 40px;
	border:2px solid #fff;
	box-shadow:0 0 20px #000;
	display:none;
}	
	.content div{ font-size:300px; text-align:center;}
.box1{
	height:1500px;
	background-color:red;
	}
.box2{
	height:500px;
	background-color:orange;
	}
.box3{
	height:3000px;
	background-color:yellow;
	}
.box4{
	height:800px;
	background-color:green;
	}
.box5{
	height:666px;
	background-color:blue;
	}
.box6{
	height:1000px;
	background-color:cyan;
	}
.box7{
	height:1500px;
	background-color:purple;
	}
.navRight{
	position:fixed;
	right:10px;
	top:60%;
	margin-top:-20px;
	width:40px;
	text-align:center;
	line-height:30px;
	background-color:red;
	color:#fff;
	font-size:14px;
	cursor:pointer;
	border:2px solid #fff;
	box-shadow:0 0 10px #000;
	display:none;
	}	
.txt{
	font-size: 20px;
	color: #fff;
	width: 300px;
	height: auto;
	margin: 0 auto;
	text-align: left;
}								
</style>
<title>楼层导航</title>
</head>

<body>
<!--左侧固定导航-->
<div class="navLeft">
  <ul class="navList">
    <li class="cur">1F</li>
    <li>2F</li>
    <li>3F</li>
    <li>4F</li>
    <li>5F</li>
    <li>6F</li>
    <li>7F</li>
    <li class="toTop">返回顶部</li>
  </ul>
</div>
<!--右侧的返回顶部-->
<div class="toTop navRight">
	返回顶部
</div>
<!--内容区域-->
<div class="content">
  <div class="box1">1
	<p class="txt">先获取所有内容距离顶部的距离</p>
  </div>
  <div class="box2">2</div>
  <div class="box3">3</div>
  <div class="box4">4</div>
  <div class="box5">5</div>
  <div class="box6">6</div>
  <div class="box7">7</div>
</div>
<!--引用jQuery--> 
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script> 
<script type="text/javascript">
	// $(function(){//文档加载就绪
	//先获取所有内容距离顶部的距离
	var topH = [];//用于存储所有的内容div的距离顶部距离
	// var divs = $(".content div");//获取所有内容div
	// var len = divs.length; //获取内容的数量
	//alert(len);
	// for(var i=0;i<len;i++){//通过循环获取所有内容div 距离顶部距离
	// 	topH[i]=$(divs[i]).offset().top	
	// 	}
		$(".content div").each(function(i) {
			topH[i]=$('.content div').eq(i).offset().top	
		})
	//输出topH
	console.log(topH);
	
	
	//给window添加滚动事件
	$(window).scroll(function(){
	//1.设置滚动大于200px显示左侧楼层导航
	var h = $(this).scrollTop();//获取滚动距离	
		if(h>=200){
			$(".navLeft").fadeIn(500); //淡入
			$(".navRight").fadeIn(500); //淡入
			}else{
			$(".navLeft").fadeOut(500);//淡出
			$(".navRight").fadeOut(500);//淡出	
			}	
			
		h=h+50;//用于让设置样式的位置往下调低一些
	//2.滚动楼层导航样式跟随改变
			if(h<topH[1]){
				$(".navList li").eq(0).addClass("cur").siblings().removeClass("cur");	
				}else if(h>topH[1] && h<topH[2]){
				$(".navList li").eq(1).addClass("cur").siblings().removeClass("cur");	
				}else if(h>topH[2] && h<topH[3]){
				$(".navList li").eq(2).addClass("cur").siblings().removeClass("cur");	
				}else if(h>topH[3] && h<topH[4]){
				$(".navList li").eq(3).addClass("cur").siblings().removeClass("cur");	
				}else if(h>topH[4] && h<topH[5]){
				$(".navList li").eq(4).addClass("cur").siblings().removeClass("cur");	
				}else if(h>topH[5] && h<topH[6]){
				$(".navList li").eq(5).addClass("cur").siblings().removeClass("cur");	
				}else if(h>topH[6]){
				$(".navList li").eq(6).addClass("cur").siblings().removeClass("cur");	
				}		
			
			})
				
	//3.给左侧导航添加点击功能
		$(".navLeft li:not(.toTop)").click(function(){
			//alert($(this).index())
			var index = $(this).index(); //获取索引值
			//给窗口设置滚动距离
			$("html,body").animate({"scrollTop":topH[index]},500);
			})
		
	//4.返回顶部
		$(".toTop").click(function(){
		$("html,body").animate({"scrollTop":0},500);	
			})		
		// })
</script>
</body>
</html>
